// Copyright (c) 2016 Chef Software Inc. and/or applicable contributors
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

// We're specifying this here because the base/_forms.scss selectors are too
// strong and we have to override them.
input.hab-checking-input--input {
  padding-right: $base-spacing * 1.2;

  &.loading {
    &:focus {
      border-color: $light-gray;
      box-shadow: $form-box-shadow-focus-loading;
    }
  }
}

.hab-checking-input {
  &--input-wrapper {
    position: relative;
  }

  &--input-icon {
    @extend .octicon;
    position: absolute;
    right: $small-spacing;
    top: $small-spacing;

    &.loading {
      @extend .octicon-sync;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-name: hab-checking-input-spinner-rotate;
      animation-timing-function: linear;
      color: $light-gray;
    }

    &.invalid {
      @extend .octicon-circle-slash;
      color: $failure-color;
    }

    &.valid {
      @extend .octicon-check;
      color: $success-color;
    }
  }

  &--input-msg-wrap {
    text-align: right;
  }

  &--input-msg {
    > span {
      margin-left: $base-spacing;
    }

    &.invalid {
      color: $failure-color;
    }

    &.valid {
      color: $success-color;
    }
  }
}

@keyframes hab-checking-input-spinner-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
